<template>
    <div class="container" style="padding-top: 20px">
      <div class="main">
        <div class="main_list" v-loading="loading">
          <div class="main_video"  v-for="item in videoList" :key="item.id">
            <a
              href="https://www.dance365.com/discovery/special_zone?zoneId=ff80808176f5683b0176f9ae53656bd9&filter=%255B%257B%2522filterCode%2522%253A%2522subject%2522%252C%2522filterValue%2522%253A%255B%2522all%2522%255D%257D%255D&showAllSign=0&selectOrder=integrated"
              ><img
                style="
                  margin-bottom: 20px;
                  width: 286px;
                  height: 156px;
                  border-radius: 4px;
                "
                :src="item.cover"
                alt=""
            /></a>
          </div>
          <!-- <div class="main_video">
                  <img style="width:286px;height:156px; border-radius: 4px;" src="https://rs.dance365.com/photo/1610527923148.png" alt="">
              </div>
              <div class="main_video">
                  <img style="width:286px;height:156px; border-radius: 4px;" src="https://rs.dance365.com/photo/1610527923148.png" alt="">
              </div>
              <div class="main_video">
                  <img style="width:286px;height:156px; border-radius: 4px;" src="https://rs.dance365.com/photo/1610527923148.png" alt="">
              </div>
              <div class="main_video">
                  <img style="width:286px;height:156px; border-radius: 4px;" src="https://rs.dance365.com/photo/1610527923148.png" alt="">
              </div> -->
        </div>
      </div>
    </div>
  </template>
  <script lang="ts">
  import {getMainTitle} from "@/api/members";
  import { onMounted, ref } from "vue";
  </script>
  <script lang="ts" setup>
  const loading = ref<boolean>(false);
  const pageSize = ref(16);
  const videoList = ref<any>([]);
  onMounted(() => {
    getVideoList();
    loading.value = true;
    setTimeout(() => {
      loading.value = false;
    }, 1000);
  });
  const getVideoList = async () => {
    const res = await getMainTitle();
    videoList.value = res.content;
    // console.log(22,res.content);
  };
  </script>
  
  <style scoped>
  .container {
    background-color: #f5f7f9 !important;
  }
  .main {
    width: 1200px;
    height: auto;
    display: flex;
    margin: 0 auto;
    /* flex: 1; */
  }
  .main_list {
    display: flex;
    /* justify-content: space-between; */
    flex-wrap: wrap;
    width: 100%;
    /* background-color: aqua; */
  }
  .main_video {
    margin: auto 7px;
  }
  </style>
  